<template>
  <div class="editSingle" @click="changeShow()">
    <template v-if="isShow">
      <span>{{ _month }}月{{_day}}日</span>
    </template>
    <template v-else>
      <select name="" ref="Jmonth" @change="changeDays">
        <option value="1">1月</option>
        <option value="2">2月</option>
        <option value="3">3月</option>
        <option value="4">4月</option>
        <option value="5">5月</option>
        <option value="6">6月</option>
        <option value="7">7月</option>
        <option value="8">8月</option>
        <option value="9">9月</option>
        <option value="10">10月</option>
        <option value="11">11月</option>
        <option value="12">12月</option>
      </select>
      <select ref="Jday" @change="editSinglePlantTime"></select>
    </template>
  </div>
</template>

<script type="text/ecmascript-6">
  import { editSingleField } from '../../api/api'

  export default {
    name: 'monthDaySelect',
    props: {
      val: {
        type: String
      },
      field_name: {
        type: String
      }
    },
    data() {
      return {
        isShow: true,
        editedValue: '',
        m: '',
        d: '',
        Month: 0,
        Day: 0
      }
    },
    created() {
      this.editedValue = this.val
    },
    computed: {
      _month() {
        let _value = this.editedValue
        if (_value.length === 3) {
          _value = '0' + _value
        }
        let _month = parseInt(_value.substring(0, 2))
        this.Month = _month
        return _month
      },
      _day() {
        let _value = this.editedValue
        if (_value.length === 3) {
          _value = '0' + _value
        }
        let _day = parseInt(_value.substring(2))
        this.Day = _day
        return _day
      }
    },
    methods: {
      changeShow() {
        this.isShow = false
        this.$nextTick(() => {
          this.m = this.$refs.Jmonth
          this.d = this.$refs.Jday
          this.m.value = this.Month
          this.setDay()
        })
      },
      changeDays(e) {
        this.Month = e.target.value
        this.setDay()
      },
      setDay() {
        let _date = new Date()
        _date.setMonth(this.Month)
        _date.setDate(0)
        let days = _date.getDate()
        let dHtml = ''
        for (let i = 1; i <= days; i++) {
          dHtml += '<option value="' + i + '">' + i + '日</option>'
        }
        this.d.innerHTML = dHtml
        this.d.value = this.Day
      },
      editSinglePlantTime(e) {
        let _day = e.target.value
        let sendDay = _day
        if (_day < 10) {
          sendDay = '0' + _day
        }
        this.Day = _day
        let val = this.Month + sendDay
        let para = {'val': val, 'field_name': this.field_name}
        editSingleField(para).then((res) => {
          if (res.s === 1) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.editedValue = val
            this.isShow = true
          }
        })
      }
    },
    mounted() {}
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .editSingle
    cursor pointer
</style>
